<template>
    <div class="title">
        <div class="mainTitle">{{ props.title }}</div>
        <div class="subTitle">{{ props.subTitle }}</div>
    </div>

</template>

<script setup>
const props = defineProps({
    title: {
        type: String,
        default: '-'
    },
    subTitle: {
        type: String,
        default: '-'
    }
})
</script>

<style lang="scss" scoped>
.title {
    font-family: SourceHanSerifSC, PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei, serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;

    .mainTitle {
        font-size: 40px;
        font-weight: 700;
        color: #333;
    }

    .subTitle {
        font-size: 20px;
        font-weight: 400;
        color: #666;
    }

}
</style>